<template>
    <Card shadow>
        <div>
            <div class="config-page-con config-category-con">
                <Menu width="auto" active-name="basic" @on-select="handleSelect">
                    <MenuItem name="basic">
                        <span class="category-title">基本设置</span>
                    </MenuItem>
                    <MenuItem name="operate">
                        <span class="category-title">运营参数设置</span>
                    </MenuItem>
                </Menu>
            </div>
            <div class="config-page-con config-view-con">
                <basic-component v-if="currentconfigType == 'basic'"></basic-component>
                <operate-component v-if="currentconfigType == 'operate'"></operate-component>
            </div>
        </div>
    </Card>
</template>

<script>
import BasicComponent from './components/basic'
import OperateComponent from './components/operate'

export default {
components: {
  BasicComponent,
  OperateComponent,
},
data() {
  return {
    currentconfigType: 'basic',
  }
},
mounted() {
  let t = this
  // t.getTableStatusExcute('attachments')
  // t.getTableDataExcute(t.feeds.current_page)
},
methods: {
  handleSelect(name) {
    this.currentconfigType = name
  },


  getTableStatusExcute(params) {
    let t = this
    getTableStatus(params).then(res => {
      const response_data = res.data
      t.tableStatus.enable = response_data.enable
      t.tableStatus.use_status = response_data.use_status
      t.tableStatus.type = response_data.type
      t.tableStatus.storage_position = response_data.storage_position
    })
  },
  getTableDataExcute(to_page) {
    let t = this
    t.tableLoading = true
    t.feeds.current_page = to_page
    getTableData(to_page, t.feeds.per_page, t.searchForm).then(res => {
      t.feeds.data = res.data
      t.feeds.total = res.meta.total
      t.tableLoading = false
    }, function (error) {
      t.tableLoading = false
    })
  },
  onSortChange: function (data) {
    const order = data.column.key + ',' + data.order
    this.searchForm.order_by = order
    this.getTableDataExcute(this.feeds.current_page)
  },
  switchEnableExcute(index) {
    let t = this
    let new_status = 'T'
    if (t.feeds.data[index].enable === 'T') {
      new_status = 'F'
    }
    switchEnable(t.feeds.data[index].id, 'attachments', new_status).then(res => {
      t.feeds.data[index].enable = new_status
      t.$Notice.success({
        title: res.config
      })
    })
  },
  deleteAttachmentExcute(attachment, key) {
    let t = this
    deleteAttachment(attachment).then(res => {
      t.feeds.data.splice(key, 1)
      t.$Notice.success({
        title: res.config
      })
    })
  },
  showModalClose() {
    this.showInfoModal.show = false
  }
}
}
</script>

<style lang="less">
    .config-page {
        &-con {
            height: ~"calc(100vh - 176px)";
            display: inline-block;
            vertical-align: top;
            position: relative;
            &.config-category-con {
                border-right: 1px solid #e6e6e6;
                width: 200px;
            }
            &.config-list-con {
                border-right: 1px solid #e6e6e6;
                width: 230px;
            }
            &.config-view-con {
                position: absolute;
                top: 16px;
                bottom: 16px;
                overflow: auto;
                padding: 12px 20px 0;
                .config-view-header {
                    margin-bottom: 20px;
                    .config-view-title {
                        display: inline-block;
                    }
                    .config-view-time {
                        margin-left: 20px;
                    }
                }
            }
            .category-title {
                display: inline-block;
                width: 65px;
            }
        }
    }
</style>
